<template>
  <div class="list-sort-wrapper">
    <div
      v-for="(item, index) in dataList"
      :key="item.label"
      class="list-item-box"
      :class="{ active: index === currentIndex }"
      @click="handleItemClick(item, index)"
    >
      <div class="label">{{ item.label }}</div>
      <div class="arrow">
        <i
          class="el-icon-sort-down"
          :class="{ 'arrow-active': index === currentIndex && item.sort === -1 }"
        />
        <i
          class="el-icon-sort-up"
          :class="{ 'arrow-active': index === currentIndex && item.sort === 1 }"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    sort: {
      type: Object,
      default: () => ({}),
    },
    dataList: {
      type: Array,
      default: () => [
        {
          label: '排序1',
          sort: -1,
          key: 'name',
        },
        {
          label: '排序2',
          sort: -1,
          key: 'counts',
        },
      ],
    },
  },
  data() {
    return {
      currentIndex: -1,
    }
  },
  methods: {
    handleItemClick(item, index) {
      if (this.currentIndex === index) {
        item.sort = item.sort === 1 ? -1 : 1
      } else {
        this.currentIndex = index
        item.sort = -1
      }
      this.$emit('update:sort', { ...item })
    },
  },
})
</script>
<style lang="scss" scoped>
.list-sort-wrapper {
  @apply flex text-[#888EA9];

  .list-item-box {
    @apply flex cursor-pointer;

    .label {
    }

    .arrow {
      @apply text-[#888EA9];

      .el-icon-sort-down {
        @apply font-semibold;
      }

      .el-icon-sort-up {
        @apply font-semibold relative -left-3;
      }

      .arrow-active {
        @apply text-[#0091FF];
      }
    }
  }

  .active {
    @apply text-[#0091FF];
  }
}
</style>
